<template>
    <div class="content">
        <el-dialog :visible.sync="modifyTeacher.dialogFormVisible" title="修改班级名称" size="tiny" :before-close="handleClose">
            <div v-loading="uploading">
              <section>
               <el-form :model="modifyTeacher" ref="modifyTeacher" :rules="validRule" label-width="80px">
                    <el-form-item label="修改名称" prop="className">
                      <el-popover placement="top-start" trigger="focus" content="请输入小于10位的名称">
                        <el-input slot="reference" :maxlength="10" v-model="modifyTeacher.className" placeholder="请输入修改班级名称"></el-input>
                      </el-popover>
                    </el-form-item>
                </el-form>
              </section>
             <footer>
              <el-button @click="handleClose">取消</el-button>
              <el-button @click="add('modifyTeacher')" type="primary">确认</el-button>
            </footer>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { changeClassName } from "api/classAll";
export default {
  name: "modifyClassName",
  props: {
    modifyTeacher: {
    }
  },
   created() {
    this.oldClassName=this.modifyTeacher.className;//修改前的班级名称（这里记录一下，为了提交时检查是否修改）
  },
  data() {
    var nameValidate = (rule, value, callback) =>{
      let va = /[@#\$%\^&\*]+/g;
          if (va.test(value)) {
            callback(new Error('请勿输入特殊字符'));
          }
          callback();
    }
    return {
      oldClassName:'',//修改前的班级名称
      uploading: false,
       validRule:{
        className: [
          { required: true, message: "请输入修改名称", trigger: "blur" },
          { min: 0, max: 10, message: "请输入10个汉字以内的班级名", trigger: "blur" },
          { validator: nameValidate, trigger: 'blur'},
          { pattern: /^[^\s]+$/, message: '请勿输入空格', trigger: 'blur' },
        ]
      }
    };
  },
  methods: {
    handleClose() {
      this.modifyTeacher.dialogFormVisible = false;
    },
    add(val) {
      this.$refs[val].validate(valid => {
        if (valid) {
            if(this.modifyTeacher.className == this.oldClassName.trim()){
                this.$message('您没有修改任何信息');
                return false
            }
            this.uploading = true;
            let value = `${this.modifyTeacher.className}`;
            changeClassName(this.modifyTeacher.id, value).then(data => {
                //给父组件传值
                this.uploading = false;
                this.$emit("classNewName", value);
                this.$message({
                  message: "修改成功！",
                  type: "success"
                });
                this.modifyTeacher.dialogFormVisible = false;
              })
              .catch(Error => {
                this.uploading = false;
              });
        } else {
          return false;
        }
      });
    },
   
  }
};
</script>
<style lang="scss" scoped>
section,
footer {
  text-align: center;
}
.title {
  text-align: left;
  color: #999;
}
section {
  padding-bottom: 50px;
  el-button {
    margin-right: 20px;
  }
}
</style>
